<template>
  <div class="content-box">
    <div class="scroll-view-box">
      <el-button class="history-btn" @click="hisDrawer = true" size="small">历史记录</el-button>
      <div class="data-box-left">
        <div class="user-title-box" v-if="$fieldShowFunc('61-xmxx')">项目信息</div>
        <el-descriptions class="margin-bottom" :column="3" border v-if="$fieldShowFunc('61-xmxx')">
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('sfk_xmmc')">
            <div :class="label_style" slot="label">项目名称</div>
            {{ dataObj.project_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('sfk_xmbh')">
            <div :class="label_style" slot="label">项目编号</div>
            <el-button @click="goToProjectFunc" type="text" style="padding: 0;">{{ dataObj.project_number || '--'
            }}</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('sfk_xmpp')">
            <div :class="label_style" slot="label">项目品牌</div>
            {{ dataObj.brand_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('sfk_xmlx')">
            <div :class="label_style" slot="label">项目类型</div>
            {{ dataObj.store_type_name }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(5, 0, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('61-fkd')">付款信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="付款类型" v-if="$fieldShowFunc('sfk_fklx')">
            <div :class="label_style" slot="label">付款类型</div>
            <span v-if="dataObj.pay_type == 1">工程款</span>
            <span v-if="dataObj.pay_type == 2">供应商货款</span>
            <span v-if="dataObj.pay_type == 3">装修退款</span>
          </el-descriptions-item>
          <el-descriptions-item label="关联采购结算单" v-if="$fieldShowFunc('sfk_glcgjsd') && dataObj.pay_type == 2">
            <div :class="label_style" slot="label">关联采购结算单</div>
            <el-button type="text" v-if="dataObj.bill_name && $isPer(permission, ['loock_cgOrder'])"
              @click="goTodetailFunc(dataObj.settlement_id)" style="padding: 0;">{{ dataObj.bill_name || '--'
              }}</el-button>
            <span v-else>{{ dataObj.bill_name || '--' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="供应商" v-if="$fieldShowFunc('sfk_gys')">
            <div :class="label_style" slot="label">供应商</div>
            {{ dataObj.supplier_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="申请金额" v-if="$fieldShowFunc('sfk_sqje')">
            <div :class="label_style" slot="label">申请金额</div>
            {{ dataObj.apply_amount }}元
          </el-descriptions-item>
          <el-descriptions-item label="收款账户" v-if="$fieldShowFunc('sfk_skzh2')">
            <div :class="label_style" slot="label">收款账户</div>
            {{ dataObj.receive_name }}
          </el-descriptions-item>
          <el-descriptions-item label="付款账户" v-if="$fieldShowFunc('sfk_fkzh')">
            <div :class="label_style" slot="label">付款账户</div>
            {{ dataObj.main_name }}
          </el-descriptions-item>
          <el-descriptions-item label="付款状态" v-if="$fieldShowFunc('sfk_fkzt')">
            <div :class="label_style" slot="label">付款状态</div>
            <span v-if="dataObj.payment_status == 1">待一审</span>
            <span v-if="dataObj.payment_status == 2">待重新提交</span>
            <span v-if="dataObj.payment_status == 3">待二审</span>
            <span v-if="dataObj.payment_status == 4">待三审</span>
            <span v-if="dataObj.payment_status == 5">已通过，未付款</span>
            <span v-if="dataObj.payment_status == 6">已付款</span>
          </el-descriptions-item>
          <el-descriptions-item label="申请人" v-if="$fieldShowFunc('sfk_ssqr')">
            <div :class="label_style" slot="label">申请人</div>
            {{ dataObj.name }}
          </el-descriptions-item>
          <el-descriptions-item label="申请时间" v-if="$fieldShowFunc('sfk_sqsj')">
            <div :class="label_style" slot="label">申请时间</div>
            {{ dataObj.created_at }}
          </el-descriptions-item>
          <el-descriptions-item label="项目结算单" v-if="$fieldShowFunc('sfk_xmjsd') && dataObj.pay_type == 3">
            <div :class="label_style" slot="label">项目结算单</div>
            <el-button type="text" style="padding: 0;"
              v-if="dataObj.project_settlement_number && $isPer(permission, ['loock_projectOrder'])"
              @click="goToProjectSettlementFunc">{{ dataObj.project_settlement_number || '--' }}</el-button>
            <span v-else>{{ dataObj.project_settlement_number || '--' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="付款事由" v-if="$fieldShowFunc('sfk_fksy') && dataObj.pay_type == 1">
            <div :class="label_style" slot="label">付款事由</div>
            <span v-if="dataObj.apply_type == 1">基准首付款(40%)</span>
            <span v-if="dataObj.apply_type == 2">过程验收款(20%)</span>
            <span v-if="dataObj.apply_type == 3">设备调试款(30%)</span>
            <span v-if="dataObj.apply_type == 4">基准尾款(10%)</span>
            <span v-if="dataObj.apply_type == 5">增项基准(100%)</span>
            <span v-if="!dataObj.apply_type">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="备注" v-if="$fieldShowFunc('sfk_fkbz')">
            <div :class="label_style" slot="label">备注</div>
            {{ !dataObj.remarks || dataObj.remarks == null ? '--' : dataObj.remarks }}
          </el-descriptions-item>

          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(5, 0, 2, filed_judge)" :key="key"></el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 审核区域 -->
    <div class="examine-box" v-if="isExamine">
      <div class="examine-title">审核区域</div>
      <el-form :model="examineFormInline">
        <el-form-item label="是否通过" style="margin-bottom: 0px" v-if="dataObj.payment_status != 5">
          <el-radio-group v-model="examineFormInline.radio">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--  v-if="dataObj.payment_status != 5" -->
        <el-form-item label="">
          <el-input :rows="4" type="textarea" v-model="examineFormInline.desc" placeholder="审批意见"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="form-btn">
            <el-button v-if="dataObj.payment_status != 5" type="primary" @click="examineSubmitFunc"
              :loading="receiptReviewLoading">提交</el-button>
            <el-button v-if="dataObj.payment_status == 5" type="primary" @click="paySumitFunc"
              :loading="receiptReviewLoading">付款确认</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 历史弹窗 -->
    <el-drawer @close="hisDrawer = false" title="历史记录" :visible.sync="hisDrawer" :with-header="false" size="600px">
      <div class="right-box">
        <div class="title-box flex ac fw" style="margin: 20px 0 0 10px">历史记录</div>
        <template v-if="!log_list.length">
          <el-empty description="无历史数据"></el-empty>
        </template>
        <el-timeline class="timeline" v-if="dataObj">
          <el-timeline-item v-for="(item, index) in log_list" :key="index">
            <div class="setp-box">
              <div class="setp-top flex ac jb">
                <p class="time">{{ item.created_at }}</p>
                <div class="user-box flex ac">
                  <img class="avater" :src="item.image" />
                  {{ item.name + "-" + item.position }}
                </div>
              </div>
              <div class="setp-content">
                <div class="title" v-if="item.info_type == 1">
                  提交了付款单
                </div>
                <div class="title" v-if="item.info_type == 2">
                  重新提交了付款单
                </div>
                <div class="title" v-if="item.info_type != 1 && item.info_type != 2">
                  {{ item.form_data.describe }}
                </div>
                <!-- 提交/重新提交 -->
                <template v-if="item.info_type == 1 || item.info_type == 2">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <div class="table-item width-50" v-if="$fieldShowFunc('sfk_fklx')">
                        <span class="table-item-title">付款类型</span>
                        <span class="table-item-content">{{
                          item.form_data.pay_type_name || "--"
                        }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('sfk_xmmc')">
                        <span class="table-item-title">项目名称</span>
                        <span class="table-item-content">{{
                          item.form_data.project_name || "--"
                        }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('sfk_sqje')">
                        <span class="table-item-title">申请金额</span>
                        <span class="table-item-content">{{
                          item.form_data.apply_amount ? item.form_data.apply_amount + '元' : '--'
                        }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('sfk_skzh')">
                        <span class="table-item-title">收款账户</span>
                        <span class="table-item-content">{{
                          item.form_data.receive_name || "--"
                        }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('sfk_fkzh')">
                        <span class="table-item-title">付款账户</span>
                        <span class="table-item-content">{{
                          item.form_data.main_name || "--"
                        }}</span>
                      </div>
                      <!-- 工程款 -->
                      <template v-if="item.form_data.pay_type_name == '工程款'">
                        <div class="table-item width-50" v-if="$fieldShowFunc('sfk_fksy')">
                          <span class="table-item-title">付款事由</span>
                          <span class="table-item-content">{{
                            item.form_data.apply_type_name || "--"
                          }}</span>
                        </div>
                      </template>
                      <template v-if="item.form_data.pay_type_name == '供应商货款'">
                        <div class="table-item width-50" v-if="$fieldShowFunc('sfk_gys')">
                          <span class="table-item-title history_justify_4">供应商</span>
                          <span class="table-item-content">{{
                            item.form_data.supplier_name || "--"
                          }}</span>
                        </div>
                      </template>
                      <div class="table-item width-50" v-if="$fieldShowFunc('sfk_fkbz')">
                        <span class="table-item-title history_justify_4">备注</span>
                        <span class="table-item-content">{{
                          item.form_data.desc || "--"
                        }}</span>
                      </div>
                    </div>
                  </div>
                </template>
                <!-- 拒绝 -->
                <template v-if="item.opera_status && item.opera_status == 2">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <div class="table-item ">
                        <span class="table-item-title">审批意见</span>
                        <span class="table-item-content">{{
                          item.form_data.refuse_desc || "--"
                        }}</span>
                      </div>
                    </div>
                  </div>
                </template>
                <!-- 通过 -->
                <template v-if="item.opera_status && item.opera_status == 1">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <div class="table-item ">
                        <span class="table-item-title">审批意见</span>
                        <span class="table-item-content">{{
                          item.form_data.refuse_desc || "--"
                        }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import financeApi from '@/api/financeApi';

export default {
  name: 'collectionPaymentFkdetailPage',
  data() {
    return {
      // 审核
      isExamine: false,
      examineFormInline: {
        desc: "",
        radio: 1,
      },
      receiptReviewLoading: false,

      log_list: [],
      dataObj: {},
      permission: [],
      hisDrawer: false,
    };
  },
  computed: {
    label_style() {
      let _class = ''
      switch (this.dataObj.pay_type) {
        case 3:
          _class = 'justify_5'
          break
        case 2:
          _class = 'justify_7'
          break
        default:
          _class = 'justify_4'
      }
      console.log(_class)
      return _class
    },
    filed_judge() {
      let arr = []
      switch (this.dataObj.pay_type) {
        case 3:
          arr = ['sfk_xmjsd', 'sfk_fkbz'] //'sfk_glcgjsd'
          break
        case 2:
          arr = ['sfk_glcgjsd', 'sfk_fkbz'] //'sfk_xmjsd'
          break
        case 1:
          arr = ['sfk_glcgjsd', 'sfk_xmjsd'] //'sfk_fkbz'
      }
      return arr
    }
  },
  mounted() {
    this.isExamine = this.$route.query.examine || false;
    // 操作权限
    this.$getHtmlAuthority('/collectionPaymentManagement').then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.getPaymentOrderInfo();
  },
  methods: {
    // 去项目结算详情
    goToProjectSettlementFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/settlementManagement',
        query: {
          id: this.dataObj.project_id
        }
      })
    },
    // 结算单i详情
    goTodetailFunc(id) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/settlementList',
        query: {
          id
        }
      })
    },
    // 付款单详情
    getPaymentOrderInfo() {
      if (!this.$route.query.id) return;
      financeApi.getPaymentOrderInfo({
        payment_id: this.$route.query.id
      }).then(res => {
        console.log(res, "付款单详情")
        if (res.code == 200) {
          this.log_list = res.data.info_list;
          this.dataObj = res.data;
        }
      })
    },
    // 确认审核
    examineSubmitFunc() {
      let examineFormInline = this.examineFormInline;
      switch (examineFormInline.radio) {
        case 1:
          this.updatePaymentSuccess({
            payment_id: this.dataObj.id,
            payment_status: this.dataObj.payment_status,
            pay_type: this.dataObj.pay_type,
            refuse_desc: examineFormInline.desc
          })
          break;
        case 2:
          if (!examineFormInline.desc) {
            this.$message.warning('请输入拒绝原因')
            return;
          }
          this.updatePaymentRefuse({
            payment_id: this.dataObj.id,
            payment_status: this.dataObj.payment_status,
            pay_type: this.dataObj.pay_type,
            refuse_desc: examineFormInline.desc
          })
          break;
        default:
      }
    },
    // 审核通过(付款单)
    updatePaymentSuccess(obj) {
      financeApi.updatePaymentSuccess(obj).then(res => {
        console.log(res, "审核通过(付款单)")
        if (res.code == 200) {
          this.getPaymentOrderInfo();
          this.isExamine = false;
          this.$router.push({
            path: '/collectionPaymentFkdetailPage',
            query: {
              id: this.$route.query.id,
            }
          })
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 审核拒绝(付款单)
    updatePaymentRefuse(obj) {
      financeApi.updatePaymentRefuse(obj).then(res => {
        console.log(res, "审核拒绝(付款单)")
        if (res.code == 200) {
          this.getPaymentOrderInfo();
          this.isExamine = false;
          this.$router.push({
            path: '/collectionPaymentFkdetailPage',
            query: {
              id: this.$route.query.id,
            }
          })
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 付款确认
    paySumitFunc() {
      this.$confirm('确认该付款单已付款?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updatePaymentSuccess({
          payment_id: this.dataObj.id,
          payment_status: this.dataObj.payment_status,
          pay_type: this.dataObj.pay_type,
          refuse_desc: this.examineFormInline.desc
        });
      }).catch(() => {
      });
    },
    // 去项目详情
    goToProjectFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/projectDetailNew',
        query: {
          id: this.dataObj.project_id
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/detail.scss';
</style>